<template>
  <div class="parent-page">
    <!-- 触发按钮 -->
    <button @click="showPicker = true" class="trigger-btn">
      打开日期选择器（当前选中：{{ selectedDate || '无' }}）
    </button>

    <!-- 日期选择器组件 -->
    <DatePicker
      :visible="showPicker"
      :minDate="minDate"
      :maxDate="maxDate"
      :defaultDate="defaultDate"
      title="选择生日"
      confirmText="确定"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 引入日期选择器组件
import DatePicker from '@/components/DatePicker/DatePicker.vue' // 路径根据项目实际结构调整

// 父组件响应式数据
const showPicker = ref(false) // 控制组件显示/隐藏
const selectedDate = ref('') // 存储选中的日期
const minDate = ref('1990-01-01') // 最小可选日期
const maxDate = ref('2024-12-31') // 最大可选日期
const defaultDate = ref('2000-01-01') // 默认选中日期

// 确认选择事件
const handleConfirm = (date: string) => {
  selectedDate.value = date
  showPicker.value = false // 关闭组件
  console.log('选中的日期：', date) // 示例输出：2000-01-01
}

// 取消选择事件
const handleCancel = () => {
  showPicker.value = false
}
</script>

<style scoped lang="scss">
.parent-page {
  padding: 20px;

  .trigger-btn {
    padding: 8px 16px;
    border: 1px solid #00897B;
    border-radius: 4px;
    background: #fff;
    color: #00897B;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
      background: #00897B;
      color: #fff;
    }
  }
}
</style>